<template>
  <div>
    <ProspectusNav :step="2" />
    <div class="step3-container">
      <ul class="step3-nav">
        <li>
          <router-link to="step31" replace>一次性付款</router-link>
        </li>
        <li>
          <router-link to="step32" replace>按揭付款</router-link>
        </li>
      </ul>
      <router-view></router-view>
      <Drawer to="calc" title="计算结果" :open="calcVisible" @close="calcVisible = false">
        <div class="calc-container">
          <div class="row">
            <div class="col-label large">首付：</div>
            <div class="col-control blue">371088.27</div>
            <div class="col-label">元</div>
          </div>
          <div class="row">
            <div class="col-label large">首月月供：</div>
            <div class="col-control blue">5513</div>
            <div class="col-label">元</div>
          </div>
          <div class="row">
            <div class="col-label large">每月递减：</div>
            <div class="col-control blue">11</div>
            <div class="col-label">元</div>
          </div>
          <div class="row">
            <div class="col-label large">贷款总额：</div>
            <div class="col-control blue">689163.93</div>
            <div class="col-label">元</div>
          </div>
          <div class="row">
            <div class="col-label large">支付利息：</div>
            <div class="col-control blue">318336</div>
            <div class="col-label">元</div>
          </div>
          <div class="row">
            <div class="col-label large">还款总额：</div>
            <div class="col-control blue">1007500</div>
            <div class="col-label">元</div>
          </div>
          <div class="row">
            <div class="col-label large">还款月数：</div>
            <div class="col-control blue">240</div>
            <div class="col-label">月</div>
          </div>
        </div>
        <template v-slot:footer>
          <div class="drawer-footer-container__calc">
            <button class="large" @click="openGenerate">生成置业计划书</button>
            <span>以上结果仅供参考</span>
          </div>
        </template>
      </Drawer>
      <Drawer to="generate" title="请扫描二维码" :open="generateVisible" @close="generateVisible = false">
        <AutoImage class="qrcode-generate" src="/static/images/p4.png" :width="556" :height="556" />
        <div class="qrcode-generate-text">识别图中二维码收藏您的置业计划书</div>
      </Drawer>
    </div>
  </div>
</template>
<script>
import ProspectusNav from "./../components/ProspectusNav";
export default {
  components: { ProspectusNav },
  data() {
    return {
      calcVisible: false,
      generateVisible: false
    };
  },
  methods: {
    openCalc() {
      this.calcVisible = true;
    },
    openGenerate() {
      this.calcVisible = false;
      this.generateVisible = true;
    }
  }
};
</script>
<style lang="stylus">
.step3-nav {
  height: 135px;
  background: rgba(218, 229, 246, 1);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  list-style: none;
  padding-left: 750px;

  li {
    margin-right: 131px;
    position: relative;

    a {
      height: 135px;
      width: 317px;
      line-height: 135px;
      color: #000;
      text-decoration: none;
      font-size: 60px;
      display: block;
      text-align: center;

      &.router-link-active {
        color: #045FE5;

        &:after {
          content: '';
          display: block;
          width: 317px;
          height: 8px;
          background: rgba(4, 95, 229, 1);
          border-radius: 4px;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
    }
  }
}

.calc-container {
  overflow: hidden;
  overflow-y: auto;
  height: 100%;

  .row {
    margin: 100px 93px;
    width: auto;

    &:first-child {
      margin-top: 0px;
    }
  }
}

.drawer-footer-container__calc {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  span {
    font-size: 60px;
    color: rgba(183, 183, 204, 1);
    transform: translateX(-40%);
    margin-top: 40px;
  }
}

.qrcode-generate {
  display: block;
  margin: 300px auto 0;
}

.qrcode-generate-text {
  text-align: center;
  margin-top: 117px;
  font-size: 50px;
}
</style>